@layout("/common/_container.html"){
<style>html {
    width: 100%;
    overflow-x: hidden;
}

.weekdays, .days, .headerTop, .followFooter {
    display: flex;
}

.weekdays > li, .days > li, .headerTop > div, .followFooter > div {
    flex: 1;
}

.month {
    text-align: center;
}

.followHeader {
    background: #2e4050;
    color: white;
    padding-bottom: 1em;
}

.headerTop {
    padding: 1em 1em 1em 1.5em;
}

.headerTop > div:last-of-type span {
    padding: 0.1em 0.4em 0.2em;
    border-radius: 0.3em;
}

.headerDate {
    text-align: center;
}

.headerBtn {
    padding-left: 1em;
}

.headerBtn > div {
    background: url("https://pynnn.oss-cn-hangzhou.aliyuncs.com/weixin-img/bottomColour.png") no-repeat;
    display: inline-block;
    text-align: center;
    border-radius: 1.2em;
    overflow: hidden;
    padding: 0.2em;
}

.headerBtn > div > span {
    display: inline-block;
    width: 5em;
    height: 2.3em;
    background: url("https://pynnn.oss-cn-hangzhou.aliyuncs.com/weixin-img/topColour.png") no-repeat;
    background-size: cover;
    line-height: 2.3em;
    border-radius: 1.2em;
}

.weekClick {
    background: #1c2b38;
}

.followFooter {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1;
    height: 4em;
    padding: 1em 0;
    border-top: 1px solid #E5E5E5;
    text-align: center;
    background: white;
}

.followFooter > div:first-of-type {
    border-right: 1px solid #dddddd;
}

.followFooter > div > div {
    line-height: 1em;
}

.followFooter > div > span {
    color: #00a6c9;
}

#calendar .fc-view-container table > thead, #calendar .fc-header-toolbar {
    display: none;
}

::-webkit-scrollbar {
    width: 3px;
}</style>
<div style="display: none">
    <input type="hidden" id="pageNumber" value="doctorFollowUp">
</div>
<div class="doctor_followUp">
    <!--头部-->
    <div class="followHeader">
        <div class="headerTop">
            <div>
                <span class="glyphicon glyphicon-menu-left" onclick="lastOne()"></span>
            </div>
            <!-- 年份 月份 -->
            <div style="flex: 1.5;text-align: center">
                <span class="glyphicon glyphicon-menu-left" onclick="weekPre()"></span>
                <span class="month"></span>
                <span class="glyphicon glyphicon-menu-right" onclick="weekNext()"></span>
            </div>
            <div style="text-align: right;">
                <span class="glyphicon glyphicon-th-list"></span>
                <span class="week">周</span>
                <span class="glyphicon glyphicon-plus plusOne" onclick="addAppointment()"></span>
                <span class="glyphicon glyphicon-plus plusTwo" onclick="fullowDetails()" style="display: none"></span>
            </div>
        </div>
        <div class="headerDate">
            <!-- 星期 -->
            <ul class="weekdays">
                <li>一</li>
                <li>二</li>
                <li>三</li>
                <li>四</li>
                <li>五</li>
                <li>六</li>
                <li>日</li>
            </ul>
            <!-- 日期 -->
            <ul class="days"></ul>
        </div>
        <div class="headerBtn">
            <div>
                <span class="appointment">预约</span>
                <span class="followBtn" style="background: none">随访</span>
            </div>
        </div>
    </div>
    <div id="calendar"></div>
    <!--页脚-->
    <div class="followFooter">
        <div>
            <div>全部医生</div>
            <span class="glyphicon glyphicon-triangle-top"></span>
        </div>
        <div>
            <div>全部诊室</div>
            <span class="glyphicon glyphicon-triangle-top"></span>
        </div>
    </div>
</div>
<link href="https://pynnn.oss-cn-hangzhou.aliyuncs.com/wxfullcalendar.css?v=20200628" rel="stylesheet">
<link href='https://pynnn.oss-cn-hangzhou.aliyuncs.com/fullcalendar.print.min.css?v=20200628' rel='stylesheet'
      media='print'/>
<script src="https://pynnn.oss-cn-hangzhou.aliyuncs.com/fullmoment.min.js?v=20200628"></script>
<script src="${ctxPath}/static/modular/fullcalendar/lib/jquery.min.js?v=20200628"></script>
<script src="https://pynnn.oss-cn-hangzhou.aliyuncs.com/fulljquery-ui.min.js?v=20200628"></script>
<script src="https://pynnn.oss-cn-hangzhou.aliyuncs.com/fullcalendar.js?v=20200628"></script>
<script src="https://pynnn.oss-cn-hangzhou.aliyuncs.com/scheduler.min.js?v=20200628"></script>
<script src="https://pynnn.oss-cn-hangzhou.aliyuncs.com/zh-cn.js?v=20200628"></script>
<script src="https://pynnn.oss-cn-hangzhou.aliyuncs.com/zepto.js?v=20200628"></script>
<script>
    var days = [];
    $(function () {
        var date = new Date();
        var currentYear = date.getFullYear();       // 当前年份
        var currentMonth = date.getMonth() + 1;    // 当前月份
        var currentDay = date.getDate();         // 今日日期 几号
        var currentWeek = date.getDay();// 1...6,0   // 星期几
        if (currentMonth < 10) currentMonth = "0" + currentMonth;
        if (currentDay < 10) currentDay = "0" + currentDay;
        if (currentWeek === 0) {
            currentWeek = 7
        }
        var str = currentYear + "-" + currentMonth + "-" + currentDay;
        var monthTitle = currentYear + "年" + currentMonth + "月";
        $(".month").html(monthTitle);
        for (var i = currentWeek - 1; i >= 0; i -= 1) {
            var d = new Date(str);
            d.setDate(d.getDate() - i);
            days.push(d)
        }
        for (var w = 1; w <= 7 - currentWeek; w += 1) {
            var s = new Date(str);
            s.setDate(s.getDate() + w);
            days.push(s)
        }
        var li = '';
        for (var e = 0; e < days.length; e++) {
            var time = new Date();
            if (time.getDate() == days[e].getDate()) {
                li = '<li style="color: red">' + days[e].getDate() + '</li>';
            } else {
                li = '<li>' + days[e].getDate() + '</li>';
            }
            $(".days").append(li);
        }
    });

    weekPre = function () { //上个星期
        $(".days").html("");
        var d = days[0];  // 如果当期日期是7号或者小于7号
        d.setDate(d.getDate() - 7);
        var date = new Date(d);
        var currentYear = date.getFullYear();       // 当前年份
        var currentMonth = date.getMonth() + 1;    // 当前月份
        var currentDay = date.getDate();         // 今日日期 几号
        var currentWeek = date.getDay();// 1...6,0   // 星期几
        if (currentMonth < 10) currentMonth = "0" + currentMonth;
        if (currentDay < 10) currentDay = "0" + currentDay;
        if (currentWeek === 0) {
            currentWeek = 7
        }
        var str = currentYear + "-" + currentMonth + "-" + currentDay;
        var monthTitle = currentYear + "年" + currentMonth + "月";
        $(".month").html(monthTitle);
        days.length = 0;
        for (var i = currentWeek - 1; i >= 0; i -= 1) {
            var q = new Date(str);
            q.setDate(q.getDate() - i);
            days.push(q)
        }
        for (var w = 1; w <= 7 - currentWeek; w += 1) {
            var s = new Date(str);
            s.setDate(s.getDate() + w);
            days.push(s)
        }
        var li = '';
        for (var e = 0; e < days.length; e++) {
            var time = new Date();
            if (time.getDate() == days[e].getDate()) {
                li = '<li style="color: red">' + days[e].getDate() + '</li>';
            } else {
                li = '<li>' + days[e].getDate() + '</li>';
            }
            $(".days").append(li);
        }
    };

    weekNext = function () {//  下个星期
        $(".days").html("");
        var d = days[6];    // 如果当期日期是7号或者小于7号
        d.setDate(d.getDate() + 7);
        var date = new Date(d);
        var currentYear = date.getFullYear();       // 当前年份
        var currentMonth = date.getMonth() + 1;    // 当前月份
        var currentDay = date.getDate();         // 今日日期 几号
        var currentWeek = date.getDay();// 1...6,0   // 星期几
        if (currentMonth < 10) currentMonth = "0" + currentMonth;
        if (currentDay < 10) currentDay = "0" + currentDay;
        if (currentWeek === 0) {
            currentWeek = 7
        }
        var str = currentYear + "-" + currentMonth + "-" + currentDay;
        var monthTitle = currentYear + "年" + currentMonth + "月";
        $(".month").html(monthTitle);
        days.length = 0;
        for (var i = currentWeek - 1; i >= 0; i -= 1) {
            var q = new Date(str);
            q.setDate(q.getDate() - i);
            days.push(q)
        }
        for (var w = 1; w <= 7 - currentWeek; w += 1) {
            var s = new Date(str);
            s.setDate(s.getDate() + w);
            days.push(s)
        }
        var li = '';
        for (var e = 0; e < days.length; e++) {
            var time = new Date();
            if (time.getDate() == days[e].getDate()) {
                li = '<li style="color: red">' + days[e].getDate() + '</li>';
            } else {
                li = '<li>' + days[e].getDate() + '</li>';
            }
            $(".days").append(li);
        }
    };

    $(".week").click(function () { //点击周
        if ($(".week").hasClass('weekClick')) {
            $(".glyphicon-th-list").show();
            $(".week").removeClass('weekClick')
        } else {
            $(".glyphicon-th-list").hide();
            $(".week").addClass('weekClick')
        }
    });

    $(".followBtn").click(function () { //点击随访
        $('.followBtn').css("background", "url(\"https://pynnn.oss-cn-hangzhou.aliyuncs.com/weixin-img/topColour.png\") no-repeat");
        $('.appointment').css("background", "none");
        $(".week,.plusOne,.glyphicon-th-list").hide();
        $(".plusTwo").show();
    });

    $(".appointment").click(function () { //点击预约
        $('.appointment').css("background", "url(\"https://pynnn.oss-cn-hangzhou.aliyuncs.com/weixin-img/topColour.png\") no-repeat");
        $('.followBtn').css("background", "none");
        $(".glyphicon-th-list,.week,.plusOne").show();
        $(".plusTwo").hide();
    });

    lastOne = function () {
        window.location.href = Feng.ctxPath + "/weixin/index";
    };

    addAppointment = function () {//为预约状态时点击 + 号
        var pageNumber = $("#pageNumber").val(); //预约页标识
        window.location.href = Feng.ctxPath + "/doctorLooked/doctor_addAppointment/" + pageNumber;
    };

    fullowDetails = function () {  //为随访状态时点击 + 号
        var pageNumber = $("#pageNumber").val(); //预约页标识
        window.location.href = Feng.ctxPath + "/doctorLooked/doctor_fullowDetails/" + pageNumber;
    };

    $('#calendar').fullCalendar({
        header: {
            left: '',
            center: '',
            right: ''
        },
        defaultView: 'agendaDay',
        allDaySlot: false,
        navLinks: true,
        selectable: true,
        selectHelper: true,
        editable: true,
        eventLimit: true,
        handleWindowResize: true,
        nowIndicator: true,
        minTime: "07:00:00",
        maxTime: "20:00:00",
        slotDuration: "00:30:00",
        selectMinDistance: 30,
        timeFormat: 'H:mm',
        slotEventOverlap: false,
        schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
        dragRevertDuration: 200,
        unselectAuto: false,
        groupByResource: false,
        height: window.innerHeight - 158,
        slotLabelFormat: 'HH:mm',
        slotLabelInterval: "00:30:00"
    });
</script>
@}